<template>
  <div class="list">
    <Card>
        <Row>
          <Col span="8">
            <DatePicker @on-change="setArticalTimerange" :value="daterange" format="yyyy-MM-dd" type="daterange" placement="bottom-start" placeholder="Select date" style="width: 200px"></DatePicker>
          </Col>
          <Col span="8">
            <Input @on-search="getArticalsList(1)" v-model="searchContent" class="search" clearable search enter-button placeholder="搜索关键字" />
          </Col>
        </Row>
        <br>
      <div class="table_wrapper">
        <tables :loading="loading" :height="tableHeight" ref="tables" v-model="weixinList" :columns="columns" />
      </div>
      <br>
      <Page @on-change="getArticalsList" @on-page-size-change="changePageSize" :current="current" :total="total" show-sizer :page-size="pageSize" />
    </Card>
  </div>
</template>

<script>
import './list.less'
import { mapState, mapMutations, mapActions } from 'vuex'

import Tables from '_c/tables'
export default {
  name: 'tables_page123',
  components: {
    Tables
  },
  computed: {
    ...mapState({
      loading: state => state.weixin.loading,
      weixinList: state => state.weixin.weixinArticalList,
      total: state => state.weixin.weixinArticalPage.total,
      current: state => state.weixin.weixinArticalPage.current,
      pageSize: state => state.weixin.weixinArticalPage.pageSize
    }),
    searchContent: {
      get () {
        return this.$store.state.weixin.weixinArticalPage.key
      },
      set (searchContent) {
        this.setArticalSearchKey(searchContent)
      }
    },
    daterange: {
      get () {
        return this.$store.state.weixin.weixinArticalPage.time.split('|')
      }
    },
    tableHeight () {
      return document.documentElement.clientHeight - 300
    }
  },
  data () {
    return {
      button1: '',
      columns: [
        {
          title: '封面',
          key: 'Info',
          render: (h, params) => {
            return (
              <div>
                <img width="100" height="80" src={`${'/v1/weixin/fileproxy?file=' + params.row.Info}`} />
              </div>
            )
          }
        },
        {
          title: '公众号',
          key: 'GongZhongHaoName'
        },
        {
          title: 'Title',
          key: 'Title'
        },
        {
          title: 'Desc',
          key: 'Desc'
        },
        {
          title: '日期',
          key: 'Date'
        },
        {
          title: '链接',
          key: 'Url',
          render: (h, params) => {
            return (
              <div>
                <a href={params.row.Url} target="_blank">跳转</a>
              </div>
            )
          }
        }
      ]
    }
  },
  methods: {
    ...mapActions([
      'getArticalsList'
    ]),
    ...mapMutations([
      'setArticalTimerange',
      'changedArticalPageSize',
      'setArticalSearchKey'
    ]),
    changePageSize (pageSize) {
      this.changedArticalPageSize(pageSize)
      this.$store.dispatch('getArticalsList', 1)
    }
  },
  mounted () {
    this.$store.dispatch('getArticalsList', 1)
  }
}
</script>

<style>

</style>
